<template>
	<view>
		<u-sticky>
			<view class="tab" style="background-color: #fff;">

				<u-tabs :list="tabList" lineWidth="50" :current="current" :scrollable="false" lineColor="#FF4110"
					@change="tabChange" :activeStyle="{
						color: '#FF4110',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}"></u-tabs>
			</view>
					<!-- 时间选择 -->
					<view class="time-filter">
						<uni-datetime-picker v-model="currentTime" type="datetimerange" @change="handleTimeConfirm($event)" />
					</view>
		</u-sticky>
		<view class='bill-details'>
			<view class='sign-record'>
				<scroll-view scroll-y style="height: 85vh;padding-top: 20rpx;" @scrolltolower="loadMore">
					<view class="listNull" v-if="recordList.length == 0">
						<img src="@/static/images/listNull.png" alt="" />
						<text>暂无账单记录</text>
					</view>
					<view class='list' v-for="(item,index) in recordList " :key="index">
						<view class='item'>
							<view class='data'>{{item.time}}</view>
							<view class='listn'>
								<view class='itemn flex-between' v-for="(vo,indexn) in item.child" :key="indexn">
									<view>
										<view class='name line1'>{{vo.title}}</view>
										<view>{{vo.add_time}}</view>
									</view>
									<view class='num' v-if="vo.pm">+{{vo.number}}</view>
									<view class='num font-color' v-else>-{{vo.number}}</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 加载状态 -->
					<u-loadmore :status="loadingState" icon-type="circle" />
				</scroll-view>
				<!-- 分页控件 -->
				<u-pagination v-model="page" :page-count="pageCount" :total="pageTotal" mode="button"
					@change="pageChange" />
			</view>
		</view>

	</view>
</template>

<script setup>
	import API from "@/api/index.js"
	import {
		reactive,
		ref,
		computed
	} from "vue"
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom,
		onShareAppMessage
	} from '@dcloudio/uni-app';
	const tabList = ref(
		[{
				name: '全部'
			},
			{
				name: '充值'
			},
			{
				name: '消费'
			},

		])

	let page = ref(1)
	let pageSize = ref(10)
	let pageTotal = ref(10)
	let loading = ref(false)
	let loadingState = ref('loadmore')

	// 计算总页数
	const pageCount = computed(() => {
		return Math.ceil(pageTotal.value / pageSize.value)
	})
	onLoad(() => {
		getList(1)
	})
	
	let condition = reactive([{
		"filedIndex": "uid",
		"filedValue": uni.getStorageSync('userInfo').id
	},{
		"filedIndex": "type",
		"filedValue": null
	}])
	const currentTime = ref([Date.now() - 1000000000, Date.now()])
	// 方法
	const handleTimeConfirm = (time) => {
		console.log('选择的时间：', time, currentTime.value)
		currentTime.value[0] = time[0]
		currentTime.value[1] = time[1]
		condition[2] = {
			"filedIndex": "date",
			"filedValue":  time.toString()
		}
		getList(1)
	}
	
	// 获取列表
	const getList = async (index) => {
		// 处理中condition中为null的数据
		const conditionArray = condition.filter(item => item !== null);
		console.log("conditionArray",conditionArray);
		try {
			loadingState.value = 'loading'
			let res = await API.CashFlowList({
				"pageIndex": index,
				"pageSize": 10,
				"condition": conditionArray
			})

			console.log("getData res", res.data.list);
			if (index == 1) {
				recordList.length = 0
				Object.assign(recordList, res.data.list)
			} else {
				recordList.push(...res.data.list)
			}
			pageTotal.value = res.data.total
			page.value = res.data.currentPage
			loadingState.value = recordList.length >= pageTotal.value ? 'nomore' : 'loadmore'
		} catch (e) {
			loadingState.value = 'error'
		}
	}
	//当前的tab
	const current = ref(0);
	//点击tab事件
	const tabChange = (e) => {
		current.value = e.index;
		recordList.length = 0
		if (e.index == 0) {
			// 全部
			condition[1] = {
				"filedIndex": "type",
				"filedValue": null
			}
		} else if (e.index == 1) {
			// 充值
			condition[1] = {
				"filedIndex": "type",
				"filedValue": '充值'
			}
		} else {
			// 消费
			condition[1] = {
				"filedIndex": "type",
				"filedValue": '消费'
			}
		}
		getList(1)
	};

	// 页码变化
	const pageChange = (page) => {
		page.value = page
		console.log("页码变化了", page.value);
		getData(page.value)
	}
	// 加载更多（滚动到底部）
	const loadMore = () => {
		console.log("滚动到底了");
		console.log(page.value, pageCount.value);
		if (page.value < pageCount.value) {
			page.value++
			setTimeout(() => {
				getData(page.value)
			}, 1000)
		}
	}
	// 记录列表
	const recordList = reactive([{
		name: '1',
		time: '2021-01-02 03:21:10',
		child: [{
				title: '新用户充值',
				add_time: '2021-01-02 03:21:10',
				pm: true,
				number: 10
			},
			{
				title: '新用户充值',
				add_time: '2021-01-02 03:21:10',
				pm: false,
				number: 10
			}
		]
	}]);
	//请求参数
	const params = ref({});
	//上拉刷新回调以及下拉加载回调
	const upCallback = async (mescroll) => {
		// params.value.orderStatus = tabList[current.value].value;
		// const res = await API.getOrderList({
		// 	page: mescroll.num,
		// 	size: mescroll.size,
		// 	...removeEmptyValues(params.value)
		// });
		// const curPageData = res.data.rows || []; // 当前页数据
		// if (mescroll.num == 1) orderList.value = []; // 第一页需手动制空列表
		// orderList.value = orderList.value.concat(curPageData); //追加新数据
		// mescroll.endBySize(curPageData.length, res.data.total);
	};
</script>

<style scoped lang='scss'>
	.time-filter {
		margin: 20rpx 0;
		text-align: center;
	}
	.listNull {
		display: flex;
		flex-direction: column;
		text-align: center;
		margin: 0 auto;
	
		image {
			width: 200rpx;
			height: 200rpx;
			// margin: 10% 0 10% 10%;
			margin: 20rpx auto;
		}
	
		text {
			color: #919ea9;
		}
	}
	.sign-record .list .item .data {
		height: 40px;
		line-height: 40px;
		padding: 0 15px;
		font-size: 12px;
		color: #666;

	}

	.sign-record .list .item .listn {
		background-color: #fff;
		font-size: 12px;
		color: #999;

	}

	.sign-record .list .item .listn .itemn {
		border-bottom: 1px solid #eee;
		padding: 15px;

	}

	.sign-record .list .item .listn .itemn .num {
		font-size: 18px;
		font-family: 'Guildford Pro';
		color: #16ac57;
	}

	.sign-record .list .item .listn .itemn .name {
		font-size: 14px;
		color: #282828;
		margin-bottom: 5px;
	}


	.sign-record .list .item .listn .itemn .num.font-color {
		color: red !important
	}
</style>